<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{ pageTitle }}
      </div>
      <q-space></q-space>
    </div>
    <!-- 查询菜单 -->
    <div class="q-pa-sm shadow-2 q-mb-md items-center">
      <div class="row q-col-gutter-sm">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">
            <q-icon color="red" name="fas fa-asterisk"/>单证类型
            账册</div>
          <div class="col-8">
            <simple-filter-select auto-select-single-option :options="$d.cbDropdownList" :use-filter="false"
              option-label="cbNo" option-value="cbId" v-model="fpsReq.cbId" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">进出标识</div>
          <div class="col-8">
            <simple-filter-select auto-select-single-option :options="$d.ieTypeDropdownList" :use-filter="false"
              v-model="fpsReq.ieType" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">
            <q-icon color="red" name="fas fa-asterisk"/>单证类型</div>
          <div class="col-8">
            <simple-filter-select auto-select-single-option :options="$d.docTypeDropdownList" :use-filter="false"
              v-model="fpsReq.docType" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">计费条目</div>
          <div class="col-8">
            <simple-filter-select auto-select-single-option :options="$d.billingNameDropdownList" :use-filter="false"
              v-model="fpsReq.billingName" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">创建日期从</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.createDtStart" use-date-picker append-icon-show />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">创建日期至</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.createDtEnd" use-date-picker append-icon-show />
          </div>
        </div>
      </div>
      <div class="row q-pt-sm">
        <div class="q-mr-sm">
          <q-btn @click="doBillDownload" color="primary" icon="save_alt" label="下载" :disable="!fpsReq.docType || !fpsReq.cbId" />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'BillDownload'
}
</script>

<script lang="ts" setup>

import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {reactive} from 'vue'
import { MhlBcBillDownloadReq } from 'src/defs/bfs/billDownload';
import { BfsCbLite } from '@njt/bfs/defs/basic/cb';

const pageTitle = '计费报表'
useTitleHelper(pageTitle)

let fpsReq: MhlBcBillDownloadReq = reactive({
  createDtStart: null,
  createDtEnd: null,
  ieType: null,
  docType: null,
  cbId: null,
  billingName: null
})

let $d = reactive({
  cbDropdownList: [] as BfsCbLite[],
  ieTypeDropdownList: [
    {
      label: '进',
      value: 'I'
    },
    {
      label: '出',
      value: 'E'
    }
  ],
  docTypeDropdownList: [
    {
      label: '核注清单',
      value: 'B'
    },
    {
      label: '核放单',
      value: 'P'
    }
  ],
  billingNameDropdownList: [] as string[]
})

const doBillDownload = () => {
  let params = $f.misc.makeSimpleQueryObj(fpsReq, [], {})
  let url = $f.misc.makeUrlWithQueryParam(
    '/project/mhlbc/bill/billing/bill-download',
    params
  )
  $f.nw.downloadFileWithAuth(url, '', false)
}


// 账册
void $f.lst.getBfsCbSimpleList()
  .then((resp) => {
    $d.cbDropdownList = resp
  })

void $f.lst.getBillingNameSimpleList()
  .then((resp) => {
    $d.billingNameDropdownList = resp
  })

</script>
